<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 元素节点,属性节点,文本节点 -->
    <div id="box" title="mytitle" style="color: pink;">pp</div>
    <div id="box2" title="mytitle" style="color: pink;">pp</div>
    <div id="box3" title="mytitle" style="color: pink;">
        <div class="box-1">
            <p>哈哈</p>
            <p>hehe</p>
        </div>
    </div>
    <script>
        // 空格和换行都会被解释成节点
        var body = document.getElementsByTagName('body')[0]
        let bodyNodes = body.childNodes
        console.log(bodyNodes)
            // 元素节点 1，属性节点 2，文本节点 3
        for (let i = 0; i < bodyNodes.length; i++) {
            console.log(bodyNodes[i].nodeType)
        }

        let box = document.getElementById("box")
        console.log('--------')
        console.log(box.nodeType) //元素节点
        console.log(box.childNodes) //元素节点
        console.log(box.nodeValue) // null ，box本身的节点值时null，因为得到的并不是包含在这个元素节点里面的文本
        console.log(box.childNodes[0].nodeValue) // pp
        console.log(box.firstChild.nodeValue) // pp
        console.log(box.lastChild.nodeValue) // pp

        let box3 = document.getElementById("box3")
        console.log(box3.innerHTML)
        box3.innerHTML = '<span>span1</span>'
        console.log(box3.innerHTML)
    </script>
</body>

</html>